<template>
    <a-modal v-model:open="handleEditFlag" :footer="null" width="800px" centered title="关联专题">
        <div class="edit-wrapper">
            <div class="edit-clomn-box">
                <div class="edit-clomn edit-clomn-left">
                    <h4 class="clomn-title">一级专题</h4>
                    <ul v-if="initColumnArr.length > 0">
                        <li v-for="(v, i) in initColumnArr" :key="i" :class="{ 'li-actived': i==activeIndex }">
                            <a-checkbox v-model:checked="v.checked"
                                 :disabled="v.status ==98" 
                                @change="changeCheck1(v, i)"></a-checkbox>
                            <div class="clomn-item-content" @click="showRight(v, i)">
                                <span> {{ v.name }}</span>
                                <img v-if="v.children?.length > 0" class="arrow-img"
                                    src="@/assets/img/meadiaIndex/up-icon.png" alt="">
                            </div>
                        </li>
                    </ul>
                    <div class="no-data" v-else>
                        暂无一级专题数据
                    </div>
                </div>
                <div class="edit-clomn edit-clomn-right">
                    <h4 class="clomn-title">二级专题</h4>
                    <ul v-if="initColumnArrChidren.length > 0">
                        <li v-for="(v, i) in initColumnArrChidren" :key="i"
                            :class="{ 'li-actived': v.checked }">
                            <a-checkbox v-model:checked="v.checked" :disabled="v.status ==98" @change="changeCheck2(v, i)">{{ v.name
                            }}</a-checkbox>
                        </li>
                    </ul>
                    <div class="no-data" v-else>
                        暂无二级专题数据
                    </div>
                </div>
            </div>

            <div class="btns">
                <a-button type="default" @click="cancelFnColum">取消</a-button>
                <a-button type="primary" @click="submitColum">提交 </a-button>
            </div>
        </div>
    </a-modal>
</template>

<script lang="ts" setup>
import { onActivated, ref} from "vue";
import { message, Modal } from "ant-design-vue";
import request from "@/utils/axios";
import { initColumnSubject } from "@/utils/mediaDetailApi";
const emit = defineEmits(['refresh']);
// 初始化栏目
const getColumnOption = () =>{
    initColumnSubject().then((res: any) => {
        initColumnArr.value = res || []
    });
}

// 栏目编辑
const handleData = ref<string>('');
const handleEditFlag = ref<boolean>(false);
const initColumnArr: any = ref([]);
const initColumnArrChidren: any = ref([]);
let checkedList = []
const activeIndex = ref(-1)

const handleEditFn = (data: any) => {
    activeIndex.value = -1
    getColumnOption()
    handleEditFlag.value = true;
    checkedList = data
    handleData.value = '';
    resetColumArr()
};
// 重置一二级栏目勾选的数据
const resetColumArr = () => {
    initColumnArr.value.forEach((vv, ii) => {
        vv.checked = false
        if (vv.children) {
            vv.children.forEach((vvv, iiii) => {
                vvv.checked = false
            })
        }
    })
    initColumnArrChidren.value = []
}
// 处理一级栏目的选中事件
const changeCheck1 = (v, i) => {
    const ck = v.checked
    initColumnArr.value[i].checked = ck
    activeIndex.value = i
    initColumnArrChidren.value = initColumnArr.value[i].children || []
    allDataHandle(v,null)
}
// 点击一级事件
const showRight = (v, i) => {
    // v.checked = !v.checked
    // changeCheck1(v, i)
    activeIndex.value = i
    initColumnArrChidren.value = initColumnArr.value[i].children || []

}
// 处理二级栏目的选中事件
const changeCheck2 = (v, i) => {
    allDataHandle(null,v)
}
// 处理所有数据
const  allDataHandle = (o1,o2)=>{
    initColumnArr.value.forEach(v=>{
        // 一级栏目
        if(o1 && o1.id==v.id){
            // 点击一级时候，二级全选或者全不选
            if(v.children?.length>0){
                v.children.forEach(vv=>{
                    vv.checked = v.checked
                })
            }else{
                v.checked  = false
            }
        }else if(o2){
            // 点击二级时候
            if(v.children?.length>0){
                v.children.forEach(vv=>{
                    if(o2.id==vv.id)(vv.checked  = o2.checked)
                })
                // 二级一个没选，父级也跟着不选
                const isNoChecked =  v.children.every(vv=>{
                    return !vv.checked
                })
                v.checked  = !isNoChecked
            }else{
                v.checked  = false
            }
        }
      
    })
}
const cancelFnColum = () => {
    handleEditFlag.value = false;
    handleData.value = '';
}

// 如果选的一级栏目 那么pre_level_column_id和column_id都填写父栏目ID  如果选的二级栏目那么pre_level_column_id为二级栏目ID  column_id为父栏目ID
const submitColum = () => {
    let topics = []
   initColumnArr.value.forEach(v => {
       if(v.checked && v.children){
        v.children.forEach( vv => {
            if(vv.checked){
                topics.push(vv.id)
            }
        })
       }
    })
    
    if (topics.length==0) {
        message.warning('请选择关联专题')
        return
    }

    let ids: Array<string> = [];
    if (handleData.value == '') {
        checkedList.map((item: any) => {
            ids.push(item.media_resource_id)
        });
    } else {
        ids.push(handleData.value)
    }
    if(topics.length===0){
        message.warning("请选择二级专题")
        return
    }
    //提交
    request({
        url: "/mediaresource-manage-service/medias/operations",
        method: "put",
        data: {
            operate_type: 12,
            ids: ids,
            topics,
        }
    }).then((res) => {
        ids = [];
        handleEditFlag.value = false;
        message.success('关联成功');
        emit("refresh")
    });

}
defineExpose({
    handleEditFn,
});
</script>
<style lang="scss" scoped src="../../Index.scss"></style>
<style lang="scss" scoped src="@/assets/css/list.scss"></style>